<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类页</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div class="fix-title">
        <div class="back">&lt;</div>
        <span>商品列表</span>
        <div class="text"><a href="search.html">搜索</a></div>
    </div>
    <div class="cate-list-fix">
        <ul class="one">
            <li class="lis" class="active" ><a href="" data-id="1">分类1</li>
            <li class="lis" ><a href="" data-id="2">分类2</a></li>
            <li class="lis" ><a href="" data-id="3">分类3</a></li>
            <li class="lis" ><a href="" data-id="4">分类4</a></li>
            <li class="lis" ><a href="" data-id="5">分类5</a></li>
        </ul>
    </div>
    <div class="good-list">
        <ul class="list">
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
        </ul>
        <div class="empty">
            <span>空空如也...</span>
        </div>
        <p class="desc">数据正在加载中...</p>
        <p class="desc">我也是有底线的...</p>
    </div>

    <script src="../axios.js"></script>
    <script>

        // 设置请求根路径
        axios.defaults.baseURL = "http://124.223.14.236:3001/api"

        let index = localStorage.getItem("cate_id")
        let i = 0
        console.log(index)

        // 封装渲染函数
        function rednerDOM(data) {
            console.log(data)
            return data.map(item => {
                const { id, title, img, price } = item
                // console.log(item);
                return `
                    <li>
                        <img src="${img}" alt="">
                        <h3>${title}</h3>
                        <p>
                            <span>￥${price}</span>
                            <span id="add" data-id="${i}">+</span>
                        </p>
                    </li>
                    `
            }).join("");
            i++
        }

        //点击初始渲染
        async function init(){
            const {data: {data: {list}}} = await axios("/goods", {
                params:{
                    cate_id: index
                }
            })
            console.log(list);
            const str = rednerDOM(list)
            document.querySelector(".list").innerHTML = str
        }
        init()

        //切换渲染
        document.querySelector(".one").addEventListener("click", async function(e){
            e.preventDefault()
            if(e.target.tagName === "A"){
                const pageNum = e.target.getAttribute("data-id")
                console.log(pageNum);
                
                const {data: {data: {list}}} = await axios("/goods",{
                    params:{
                        cate_id: index,
                        pageNum
                    }
                })
                // console.log(list);
                const str = rednerDOM(list)
                document.querySelector(".list").innerHTML = str
            }
        })

        // $.ajax({
        //     method: 'GET',
        //     url: 'http://124.223.14.236:3001/api/goods',
        //     data:{
        //         cate_id: index
        //     },
        //     success: function (info) {
        //         console.log(info);
        //         let str = rednerDOM(info.data.list);
        //         $(".list").html(str);


        //         $(".list").on("click", "#add", function (){
        //             // console.log(1)

        //             $.ajax({
        //                 method: "POST",
        //                 url: "http://124.223.14.236:3001/api/goods",
        //                 headers: {
        //                     Authorization: localStorage.getItem("token")
        //                 },
        //                 data: {
        //                     cate_id: index,
        //                     pageNum: $(".lis").attr("data-id"),
        //                     order: 1,
        //                     title: info.data.list[$(this).attr("data-id")].title

        //                 },
        //                 success(res){
        //                     console.log(res)
        //                 }
        //             })
        //         })
        //     }
        // })
        
        // $(".lis").click(function (e){
        //     e.preventDefault()
        //     let pageNum = $(this).attr("data-id")

        //     $.ajax({
        //         method: "GET",
        //         url: "http://124.223.14.236:3001/api/goods",
        //         data: {
        //             cate_id: index,
        //             pageNum
        //         },
        //         success(res){
        //             console.log(res)
        //             let str = rednerDOM(res.data.list);
        //             $(".list").html(str);


        //         }
        //     })
        // })



    </script>
</body>

</html>